﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_jtemplate.aspx.cs" Inherits="TestDemo_Ajax_jtemplate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body { font-size:12px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="/js/plugin/jTemplates/jquery-jtemplates_uncompressed.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#pageMethod").click(function () {

                $.ajax({
                    type: "POST",
                    url: "Ajax_jtemplate.aspx/GetMessage",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#msgbox").text(msg.d);
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });

            $("#WSMethod").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/App_Services/DemoWebService.asmx/GetDatatimeNow",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#msgbox").text(msg.d);
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });

            $.ajax({
                type: "POST",
                url: "Ajax_jtemplate.aspx/GetFeedburnerItems",
                data: "{'Count':'7'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //BuildTable(msg.d);

                    ApplyTemplate(msg);

                },
                error: function () {
                    alert("error");
                }
            });

            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxStop(function () {
                $(this).hide();
            });

        });

        function ApplyTemplate(msg) {

            $('#Container').setTemplateURL('/template/rss.htm', null, { filter_data: false });
            $('#Container').processTemplate(msg);
        }       
    </script>
</head>
<body>
    <div id="loading" style="position: absolute; top: 0px; right: 0px; width: 80px; height: 30px;
        background-color: Red; color: White; text-align: center;">
        loading...
    </div>
    <input id="pageMethod" name="d" type="button" value="Data From ASPX Page Method" />
    <input id="WSMethod" name="d" type="button" value="Data From Web Service Method" />
    <div id="msgbox">
    </div>
    <div id="Container">
        <div style="width: 100%; height: 100%; text-align: center;">
            <img title="数据载入中..." alt="" src="/imgs/Wait.gif" />
        </div>
    </div>
    <form id="form1" runat="server">
    </form>
    <div>
        Demo Ajax Repeat URL
        <label>
            http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/
        </label>
    </div>
</body>
</html>